<template>
  <div id="app" class="manage-sidebar">
    <el-container style="height: 100%">
      <el-aside
        width="200px"
        class="side"
        style="height: 100%; background-color: rgb(48, 65, 86)"
      >
        <el-menu
          router
          :default-active="this.$route.path.slice(1)"
          background-color="rgb(48, 65, 86)"
          text-color="rgb(191, 203, 217)"
          active-text-color="rgb(64, 158, 255)"
        >
          <el-menu-item index="FileLog">
            <template slot="title"
              ><i
                class="el-icon-document"
                style="position: absolute; margin-top: 20px; margin-left: -25px"
              ></i
              >系统日志</template
            >
          </el-menu-item>
          <el-submenu index="2" class="inner-menu">
            <template slot="title"
              ><i
                class="el-icon-user-solid"
                style="position: absolute; margin-top: 20px; margin-left: -25px"
              ></i
              >用户管理</template
            >
            <el-menu-item index="UserList" style="text-align: center"
              ><i
                class="el-icon-s-custom"
                style="position: absolute; margin-top: 18px; margin-left: -25px"
              ></i
              >用户列表</el-menu-item
            >
            <el-submenu index="4">
              <template slot="title"
                ><i
                  class="el-icon-s-check"
                  style="
                    position: absolute;
                    margin-top: 20px;
                    margin-left: -25px;
                  "
                ></i
                >审批</template
              >
              <el-menu-item index="RegisterApproval" style="text-align: center"
                ><i
                  class="el-icon-plus"
                  style="
                    position: absolute;
                    margin-top: 16px;
                    margin-left: -25px;
                  "
                ></i
                >注册账户</el-menu-item
              >
              <el-menu-item
                index="ResetPasswordApproval"
                style="text-align: center"
                ><i
                  class="el-icon-key"
                  style="
                    position: absolute;
                    margin-top: 16px;
                    margin-left: -25px;
                  "
                ></i
                >重置密码</el-menu-item
              >
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="padding: 0">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "ManagementPage",
  data() {
    return {
      userName: this.$store.getters.userName,
      userDept: this.$store.getters.userDept,
      userType: this.$store.getters.userTypeName,
      password: "123",
      userId: this.$store.getters.userId,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less">
.manage-sidebar {
  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
  }
  .inner-menu .el-submenu > .el-submenu__title {
    text-align: left;
    padding-left: 70px !important;
  }
  .inner-menu .el-submenu .el-menu-item {
    text-align: left;
    padding-left: 70px !important;
  }
  .el-menu-item,
  .el-submenu__title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left;
    padding-left: 40px !important;
  }

  /* menu hover */
  .inner-menu .el-menu-item:hover,
  .inner-menu .el-submenu .el-menu-item:hover,
  .inner-menu .el-submenu > .el-submenu__title:hover {
    background-color: #001528 !important;
  }
  .el-menu-item:hover,
  .el-submenu > .el-submenu__title:hover {
    background-color: rgb(38, 52, 69) !important;
  }
  /* .el-menu {
  font-weight: bolder;
  font-size: large;
  border-right: 0 !important;
}*/
  .inner-menu .el-menu-item,
  .inner-menu .el-submenu .el-menu-item,
  .inner-menu .el-submenu > .el-submenu__title {
    background-color: #1f2d3d !important;
  }
}
</style>
<style scoped>
.side {
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  height: 100%;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.building {
  background-size: 100% 100%;
}
</style>
